<template>
  <div>
    <RouterView></RouterView>
    <van-tabbar v-model="active" @change="onChange" v-show="showNav">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="qr">全部</van-tabbar-item>
      <van-tabbar-item icon="other-pay">分类</van-tabbar-item>
      <van-tabbar-item icon="send-gift">闲置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import router from "@/router";
import { useRoute, useRouter } from "vue-router";

let route = useRoute()
function gohome() {
  router.push('/home')
}
const active = ref(0)
const onChange = (index) => {
  if (index == 0) {
    router.push('/home')
  } else if (index == 1) {
    router.push('/dn')
  } else if (index == 2) {
    router.push('/qt')
  } else if (index == 3) {
    router.push('/mine')
  }
};
// console.log(route.path)
let showNav = ref(true)
//导航栏与路由同步
watch(() => router.currentRoute.value.path, (ne, ol) => {
  // console.log(ne, ol);
  if (ne === "/dn") {
    active.value = 1
    showNav.value = true
  } else if (ne === "/mine") {
    active.value = 3
    showNav.value = true
  } else if (ne === "/home") {
    active.value = 0
    showNav.value = true
  } else if (ne === "/login") {
    showNav.value = false
  }
  else {
    active.value = 5
    showNav.value = true
  }

}, { immediate: true })


//关闭浏览器
// let beforeUnloadTime = ref(0)
// let gapTime = ref(0)

// const beforeunloadHandler = () => {
//   beforeUnloadTime.value = new Date().getTime();
// }

// const unloadHandler = () => {
//   gapTime.value = new Date().getTime() - beforeUnloadTime.value;
//   //判断是窗口关闭还是刷新
//   if (gapTime.value <= 5) {//浏览器关闭
//     localStorage.clear()
//   }
// }

// onMounted(() => {
//   //监听页面卸载（关闭）或刷新
//   window.addEventListener('beforeunload', () => beforeunloadHandler())

//   window.addEventListener('unload', () => unloadHandler())
// })
</script>

<style lang="scss" scoped></style>